<template>
  <div>
    <ul class="footer flex justify-content-between align-items">
      <li class="active">
        <van-icon name="wap-home" />
        <p>首页</p>
      </li>
      <li>
        <van-icon name="todo-list" />
        <p>家庭医生</p>
      </li>
      <li>
        <van-icon name="manager" />
        <p>我的</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Footer"
};
</script>
<style scoped>
.footer {
  height: 0.5rem;
  padding: 0 0.5rem;
  background: #fff;
  /* border-top: 1px solid #eee; */
  box-shadow: 0px 0px 3px 0px rgba(167, 167, 167, 0.5);
}
.footer li {
  font-size: 0.18rem;
  text-align: center;
  color: #333;
}
.footer li.active {
  color: #02c0cb;
}
.footer li p {
  font-size: 0.1rem;
}
.footer li i {
  vertical-align: bottom;
}
</style>
